<template>
    <div class="fillContain">
        <head-top></head-top>
        <el-form :inline="true" ref="form"  size="mini" label-width="">
            <el-form-item label="SQL编码：">
                <el-input
                        placeholder="请输入SQL编码"
                        v-model="dictCode"
                        style="width: 200px"
                        clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="SQL名称：">
                <el-input
                        placeholder="请输入SQL名称"
                        v-model="dictName"
                        style="width: 200px"
                        clearable>
                </el-input>
            </el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button  size="mini" type="primary" icon="el-icon-remove" @click="resetSearch()">重置条件</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="addRow()" style="float: right">新增</el-button>
            <!--<el-button  size="mini" type="primary" icon="el-icon-edit" style="float: right" @click="editDictManage()">编辑字典</el-button>-->
        </el-form>
        <el-table
                ref="singleTable"
                :data="tableData"
                border
                style="width: 100%;"
                :height="clientHeight"
                size="mini"
                :max-height="clientHeight"
                tooltip-effect="dark"
                @current-change="handleCurrentRowChange">
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="sqlCode"
                    label="SQL编码">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="sqlName"
                    label="SQL名称">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="sqlText"
                    label="SQL内容">
            </el-table-column>
            <el-table-column
                    prop="datasourceName"
                    label="数据源">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="valueCol"
                    label="值字段">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="nameCol"
                    label="名称字段">
            </el-table-column>
            <el-table-column
                    prop="maxRows"
                    label="最大行数">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="180px"
                    label="操作">
                <template slot-scope="scope">
                    <!--编辑按钮-->
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="editRow(scope.row)">编辑</el-button>
                    <!--删除按钮-->
                    <el-button  size="mini" type="danger" icon="el-icon-circle-close" @click="removeRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="counts">
            </el-pagination>
        </div>

        <!--编辑弹窗-->
        <el-dialog
                :title="title"
                :visible.sync="centerDialogVisible"
                width="40%">
            <el-form :model="ruleForm"
                     ref="ruleForm"
                     size="mini"
                     label-width="150px"
                     label-position="right"
                     :rules="rules">
                <el-form-item label="SQL编码：" prop="sqlCode">
                    <el-input
                            placeholder="请输入SQL编码"
                            v-model="ruleForm.sqlCode"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="SQL名称：" prop="sqlName">
                    <el-input
                            placeholder="请输入SQL名称"
                            v-model="ruleForm.sqlName"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="SQL内容：" prop="sqlText">
                    <el-input type="textarea" v-model="ruleForm.sqlText" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="数据源类型：" prop="datasourceId">
                    <el-select v-model="ruleForm.datasourceId" filterable
                               @visible-change="initDataSourceSelect"
                               placeholder="请输入数据源类型" style="width: 200px">
                        <el-option
                                v-for="item in ruleForm.options"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值字段：" prop="valueCol">
                    <el-input
                            placeholder="请输入值字段"
                            v-model="ruleForm.valueCol"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="名称字段：" prop="sqlText">
                    <el-input
                            placeholder="请输入名称字段"
                            v-model="ruleForm.nameCol"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="最大行数：" prop="maxRows">
                    <el-input
                            placeholder="请输入最大行数"
                            v-model.number="ruleForm.maxRows"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRowOk()">确 定</el-button>
                <el-button @click="editCancel()">取 消</el-button>
            </span>
        </el-dialog>

        <!--编辑字典弹窗-->
        <!--<el-dialog title="字典下拉选项配置" :visible.sync="dictSelectVisible" width="90%">
            <el-table
                    ref="singleTable"
                    :data="sysDictItemPop.sysDictData"
                    border
                    size="mini"
                    :height="popHeight"
                    style="width: 100%"
                    :max-height="popHeight"
                    @current-change="handleCurrentSysDictRowChange">
                <el-table-column
                        fixed
                        prop="dictItemId"
                        label="字典选项编码">
                </el-table-column>
                <el-table-column
                        prop="dictCode"
                        label="字典编码">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="标签">
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="值">
                </el-table-column>
                <el-table-column
                        prop="seqNum"
                        label="排序">
                </el-table-column>
                <el-table-column
                        prop="code"
                        label="编码">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        &lt;!&ndash;编辑按钮&ndash;&gt;
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="editSysDictItemRow(scope.row)" circle></el-button>
                        &lt;!&ndash;删除按钮&ndash;&gt;
                        <el-button  size="mini" type="danger" icon="el-icon-circle-close" @click="removePopRow(scope.row)" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChangePop"
                        @current-change="handleCurrentChangePop"
                        :current-page="sysDictItemPop.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="sysDictItemPop.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="sysDictItemPop.counts">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button  size="mini" type="danger" icon="el-icon-close" @click="dictSelectVisible = false">关闭</el-button>
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="addSysDictItemRow()" >新增</el-button>
            </div>
        </el-dialog>-->

        <!--编辑字典下拉选项菜单-->
        <!--<el-dialog
                :title="sysDictForm.title"
                :visible.sync="dictEditVisible"
                width="35%">
            <el-form :model="sysDictForm"
                     ref="sysDictForm"
                     size="mini"
                     label-width="150px"
                     label-position="right"
                     :rules="sysDictRules">
                <el-form-item label="字典选项编码：" prop="dictItemId">
                    <el-input
                            placeholder="请输入字典选项编码"
                            v-model="sysDictForm.dictItemId"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="字典编码：" prop="dictCode">
                    <el-input
                            placeholder="请输入字典编码"
                            v-model="sysDictForm.dictCode"
                            style="width: 200px"
                            clearable
                            disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="标签：" prop="name">
                    <el-input
                            placeholder="请输入标签"
                            v-model="sysDictForm.name"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="值：" prop="value">
                    <el-input
                            placeholder="请输入值"
                            v-model="sysDictForm.value"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="seqNum">
                    <el-input
                            placeholder="请输入排序"
                            v-model="sysDictForm.seqNum"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="编码：">
                    <el-input
                            placeholder="请输入编码"
                            v-model="sysDictForm.code"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editSysDictRowOk()">确 定</el-button>
                <el-button @click="addSysDictItemCancel()">取 消</el-button>
            </span>
        </el-dialog>-->
    </div>
</template>

<script>
    import {getSysSqlTableData,getSysSqlDataSourceList,
        addSysSqlTableData,updateSysSqlTableData,removeSysSqlTableData} from '@/api/dictCodeManager'
    import HeadTop from '@/views/main-components/HeadTop.vue'
    export default {
        params: '',
        components: {
            HeadTop
        },
        created:async function () {
            this.getUserInfo();
            /*let reply = await getSysSqlDataSourceList();
            if (reply.code == 500) {
                this.$notify.error({
                    title: '错误',
                    message: reply.msg
                });
            } else {
                this.ruleForm.options = reply.data;
            }*/
        },
        data() {
            return {
                clientHeight: '600px',
                popHeight: '250px',
                labelPosition: 'right',
                tableData: [],
                currentRow: null,
                dictCode: '',
                dictName: '',
                counts: 0,
                currentPage: 1,
                pageSize: 20,
                //编辑弹窗
                title:'',
                centerDialogVisible: false,
                oldSqlCode: '',
                ruleForm: {
                    sqlCode: '',
                    sqlName: '',
                    sqlText: '',
                    datasourceId:'',
                    valueCol:'',
                    nameCol:'',
                    maxRows:'',
                    options: [],
                },
                rules:{
                    sqlCode:[
                        { required: true, message: '请输入SQL编码', trigger: 'blur' }
                    ],
                    sqlName:[
                        { required: true, message: '请输入SQL名称', trigger: 'blur' }
                    ],
                    sqlText:[
                        { required: true, message: '请输入SQL内容', trigger: 'blur' }
                    ],
                    datasourceId:[
                        { required: true, message: '请选择数据源', trigger: 'blur' }
                    ],
                    valueCol:[
                        { required: true, message: '请输入值字段', trigger: 'blur' }
                    ],
                    nameCol:[
                        { required: true, message: '请输入名称字段', trigger: 'blur' }
                    ],
                    maxRows:[
                        { required: true, message: '请输入最大行数', trigger: 'blur' },
                        { type: 'number', message: '最大行数必须为数字'}
                    ]
                }/*,
                //编辑字典
                dictSelectVisible: false,
                dictEditVisible: false,
                //编辑字典弹窗对象
                sysDictItemPop: {
                    sysDictData: [],
                    counts: 0,
                    currentPage: 1,
                    pageSize: 20,
                    currentRow : null
                },
                //新增编辑对象
                sysDictForm: {
                    title:'',
                    dictItemId: '',
                    dictCode: '',
                    name: '',
                    value: '',
                    seqNum: '',
                    code: '',
                    oldDictItemId:''
                },
                sysDictRules:{
                    dictItemId:[
                        { required: true, message: '请输入字典选项编码', trigger: 'blur' }
                    ],
                    dictCode:[
                        { required: true, message: '请输入字典编码', trigger: 'blur' }
                    ],
                    name:[
                        { required: true, message: '请输入标签', trigger: 'blur' }
                    ],
                    value:[
                        { required: true, message: '请输入值', trigger: 'blur' }
                    ],
                    seqNum:[
                        { required: true, message: '请输入排序', trigger: 'blur' }
                    ]
                }*/
            }
        },
        methods: {
            //初始化数据源下拉菜单
            async initDataSourceSelect(bool) {
                if(bool) {
                    //初始化 sqlCode
                    var DataSourceSelect = await this.getSysSql('DATASOURCE_NAME');
                    this.ruleForm.options = DataSourceSelect;
                }
            },
            //监听页面变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.search();
            },
            //监听选中行数
            handleCurrentRowChange(val) {
                this.currentRow = val;
                //alert(this.currentRow.address);
            },
            //监听弹窗选中行数
            handleCurrentSysDictRowChange(val) {
                this.sysDictItemPop.currentRow = val;
            },
            //编辑字典翻页监听
            /*handleSizeChangePop(val) {
                this.sysDictItemPop.pageSize = val;
                this.getSysDictList();
            },
            handleCurrentChangePop(val) {
                this.sysDictItemPop.currentPage = val;
                this.getSysDictList();
                //alert(this.currentRow.address);
            },*/
            //监听页面选择变化
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();
            },

            /**
             *测试用户权限
             */
            async getUserInfo(){
                console.log(this.$route.query.userId);
                let STAFF_ID=this.$utils.getUrlKey("STAFF_ID");
                let OPERATE_TIME=this.$utils.getUrlKey("OPERATE_TIME");
                let TRADE_ID=this.$utils.getUrlKey("TRADE_ID");
                let SIGNMSG=this.$utils.getUrlKey("SIGNMSG");
                let channel='dictSQLManager';
                    if (STAFF_ID=="1"||this.pression==false){
                        this.search();
                        this.initDataSourceSelect(true);
                    } else {
                        let userinfo= await this.getUser(STAFF_ID,OPERATE_TIME,TRADE_ID,SIGNMSG,channel);
                        if (userinfo.isPression){
                            this.search();
                            this.initDataSourceSelect(true);
                        }else{
                            this.$router.push({path: '/404',query:{ msg:userinfo.msg}});
                        }
                    }

            },
            addRow() {
                this.title = "新增";
                this.ruleForm.sqlCode = '';
                this.ruleForm.sqlName = '';
                this.ruleForm.sqlText = '';
                this.ruleForm.datasourceId = '';
                this.ruleForm.valueCol = '';
                this.ruleForm.nameCol = '';
                this.ruleForm.maxRows = '';
                this.centerDialogVisible = true;
            },
            //编辑
            editRow(row) {
                this.title = "编辑";
                this.ruleForm.sqlCode = row.sqlCode;
                this.ruleForm.sqlName = row.sqlName;
                this.ruleForm.sqlText = row.sqlText;
                this.ruleForm.datasourceId = row.datasourceId;
                this.ruleForm.valueCol = row.valueCol;
                this.ruleForm.nameCol = row.nameCol;
                this.ruleForm.maxRows = row.maxRows;
                this.oldSqlCode = row.sqlCode;
                this.centerDialogVisible = true;
            },
            //确认编辑
            async editRowOk() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (valid) {
                        var params = {
                            sqlCode: this.ruleForm.sqlCode,
                            sqlName: this.ruleForm.sqlName,
                            sqlText: this.ruleForm.sqlText,
                            datasourceId: this.ruleForm.datasourceId,
                            valueCol: this.ruleForm.valueCol,
                            nameCol: this.ruleForm.nameCol,
                            maxRows: this.ruleForm.maxRows,
                            oldSqlCode: this.oldSqlCode
                        };
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let reply = this.title == "编辑" ? await updateSysSqlTableData(params) : await addSysSqlTableData(params);
                        loading.close();
                        if (reply.code == 500) {
                            this.$notify.error({
                                title: '错误',
                                message: reply.msg
                            });
                        } else {
                            this.$notify.success({
                                message: '操作成功'
                            });
                        }
                        this.$refs['ruleForm'].resetFields();
                        this.search();
                        this.centerDialogVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            //确认字典编辑OK
            async editSysDictRowOk() {
                this.$refs['sysDictForm'].validate(async (valid) => {
                    if (valid) {
                        var params = {
                            dictItemId: this.sysDictForm.dictItemId,
                            dictCode: this.sysDictForm.dictCode,
                            name: this.sysDictForm.name,
                            value: this.sysDictForm.value,
                            seqNum: this.sysDictForm.seqNum,
                            code: this.sysDictForm.code,
                            oldDictItemId: this.sysDictForm.oldDictItemId
                        };
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let reply = this.sysDictForm.title == "编辑" ? await editSysDictTableData(params) : await addSysDictTableData(params);
                        loading.close();
                        if (reply.code == 500) {
                            this.$notify.error({
                                title: '错误',
                                message: reply.msg
                            });
                        } else {
                            this.$notify.success({
                                message: '操作成功'
                            });
                        }
                        this.$refs['sysDictForm'].resetFields();
                        this.getSysDictList();
                        this.dictEditVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            //编辑取消
            editCancel() {
                this.$refs['ruleForm'].resetFields();
                this.centerDialogVisible = false;
            },
            //删除
            async removeRow(row) {
                this.$msgbox({
                    title: '提示',
                    message:"此操作将删除该条数据, 是否继续?",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                            const loading = this.$loading({
                                lock: true,
                                text: '加载中...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            var params = {
                                sqlCode: row.sqlCode,
                            };
                            let reply = await removeSysSqlTableData(params);
                            loading.close();
                            if (reply.code == 500) {
                                this.$notify.error({
                                    title: '错误',
                                    message: reply.msg
                                });
                            } else {
                                this.$notify.success({
                                    message: '删除成功'
                                });
                            }
                            this.search();
                        }
                        done();
                    }
                }).then(action => {});
            },
            //点击编辑字典
            /*async editDictManage() {
                if (this.currentRow == null || this.currentRow == undefined) {
                    this.$alert('请选择一条数据！', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {}
                    });
                    return;
                }
                this.getSysDictList();
            },
            //新增编辑字典弹窗下拉选项
            addSysDictItemRow() {
                this.sysDictForm.title = "新增";
                this.sysDictForm.dictItemId =  '';
                this.sysDictForm.dictCode = this.currentRow.dictCode;
                this.sysDictForm.name = '';
                this.sysDictForm.value = '';
                this.sysDictForm.seqNum = '';
                this.sysDictForm.code = '';
                this.sysDictForm.oldDictItemId = '';
                this.dictEditVisible = true;
            },
            //编辑编辑字典下拉选项弹窗
            editSysDictItemRow(row) {
                this.sysDictForm.title = "编辑";
                this.sysDictForm.dictItemId =  row.dictItemId;
                this.sysDictForm.dictCode = row.dictCode;
                this.sysDictForm.name = row.name;
                this.sysDictForm.value = row.value;
                this.sysDictForm.seqNum = row.seqNum;
                this.sysDictForm.code = row.code;
                this.sysDictForm.oldDictItemId = row.dictItemId;
                this.dictEditVisible = true;
            },
            //编辑字典下拉选项取消
            addSysDictItemCancel() {
                this.$refs['sysDictForm'].resetFields();
                this.dictEditVisible = false;
            },
            //删除弹窗表格内容
            async removePopRow(row) {
                row);
                this.$msgbox({
                    title: '提示',
                    message:"此操作将删除该条数据, 是否继续?",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                            const loading = this.$loading({
                                lock: true,
                                text: '加载中...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            var params = {
                                dictItemId: row.dictItemId,
                            };
                            let reply = await removeSysDictTableData(params);
                            if (reply.code == 500) {
                                this.$notify.error({
                                    title: '错误',
                                    message: reply.msg
                                });
                            } else {
                                this.$notify.success({
                                    message: '删除成功'
                                });
                            }
                            this.getSysDictList();
                            loading.close();
                        }
                        done();
                    }
                }).then(action => {});
            },
            //弹窗表格加载
            async getSysDictList() {
                var params = {
                    current: this.sysDictItemPop.currentPage,
                    size: this.sysDictItemPop.pageSize,
                    dictCode: this.currentRow.dictCode
                };
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let reply = await getSysDictList(params);
                if (reply.code == 500) {
                    loading.close();
                    this.$notify.error({
                        title: '错误',
                        message: reply.msg
                    });
                } else {
                    this.sysDictItemPop.counts = reply.data.total;
                    this.sysDictItemPop.currentPage = reply.data.pageNum;
                    this.sysDictItemPop.sysDictData = reply.data.list;
                    loading.close();
                    this.dictSelectVisible = true;
                }
            },*/
            //重置查询条件
            resetSearch() {
                this.dictCode = '';
                this.dictName = '';
            },
            //查询
            async search() {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var params = {
                    size: this.pageSize,
                    current: this.currentPage,
                    sqlCode: this.dictCode,
                    sqlName: this.dictName
                }
                let reply = await getSysSqlTableData(params);
                loading.close();
                if (reply.code == 500) {
                    this.$notify.error({
                        title: '错误',
                        message: reply.msg
                    });
                } else {
                    this.counts = reply.data.total;
                    this.currentPage = reply.data.pageNum;
                    this.tableData = reply.data.list;
                }
            }
        }
    }
</script>